<template>
    <div class="pc">
        <h3 class="title">登录</h3>
        <h4 class="sub-title">欢迎来到智慧现场管理系统</h4>
        <el-form ref="login-form" @submit.native.prevent="onSubmit('login-form')" :model="form" :rules="rules" class="login-form">
            <el-form-item prop="username">
                <el-input placeholder="请输入账户名" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="submit" class="login-button" value="登录" @click="onSubmit('login-form')"></el-input>
            </el-form-item>
        </el-form>
        <div class="others">
            <div class="clear-float">
                <div class="float-left">其他方式登录：</div>
                <div class="float-left" @click="openWXLogin">
                    <img class="icon-wx" :src="img_src" @mouseover="hoverImg" @mouseout="changeImg" />
                </div>
            </div>
            <div class="forget-the-password" @click="resetPassword">忘记密码？</div>
        </div>
        <div class="register" @click="register">
            还没有账号?
            <a to="#" class="register-button">立即注册</a>
        </div>
        <reset-password :is_reset_password_show.sync="is_reset_password_show"></reset-password>
    </div>
</template>

<script>
const rectangle = require("../../assets/rectangle.png");
const hoverrectangle = require("../../assets/ico_wechat.png");

let BASE_URL = process.env.BASE_URL;
let HOME_PAGE_URL = process.env.HOME_PAGE_URL;
let APPID = process.env.WX_APPID;
import login from "@/api/login.js";
import ResetPassword from "./reset_password.vue";
import user from "@/api/user.js";

export default {
    name: "login",
    components: {
        ResetPassword
    },
    data() {
        return {
            form: {
                username: undefined,
                password: undefined
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入账户名",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            },
            img_src: rectangle,
            is_reset_password_show: false,
            wx_login: false
        };
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    login
                        .login(this.form)
                        .then(res => {
                            if (!window.location.href.includes("url=")) {
                                window.location.href = '/main-control/';
                            } else {
                                let url = window.location.href.split(
                                    "url="
                                )[1];
                                url = decodeURIComponent(url);
                                window.location.href = url;
                            }
                        })
                        .catch(err => {
                            this.$message({
                                type: "error",
                                message: err
                            });
                        });
                } else {
                    return false;
                }
            });
        },
        hoverImg() {
            this.img_src = hoverrectangle;
        },
        changeImg() {
            this.img_src = rectangle;
        },
        resetPassword() {
            this.is_reset_password_show = true;
        },
        openWXLogin() {
            let url;
            if (window.location.href.includes("url=")) {
                url = window.location.href.split("url=")[1];
            } else {
                url = encodeURIComponent(HOME_PAGE_URL);
            }
            document.cookie = "url=" + url;
            let jumpUrl = encodeURIComponent(BASE_URL + "login");
            window.location.href =
                "https://open.weixin.qq.com/connect/qrconnect?appid=" + APPID + "&redirect_uri=" +
                jumpUrl +
                "&scope=snsapi_login&response_type=code#wechat_redirect";
        },
        register() {
            let url = BASE_URL + 'register';
            url = encodeURIComponent(url);
            window.location.href =
                "https://open.weixin.qq.com/connect/qrconnect?appid=" + APPID + "&redirect_uri=" +
                url +
                "&scope=snsapi_login&response_type=code#wechat_redirect";
        },
        async loginWx() {
            if (window.location.href.includes("code=")) {
                let code;
                code = window.location.href.split("code=")[1];
                code = code.split("&state=")[0];
                let unionId;
                await user.wxLogin({ params: { code: code } }).then(res => {
                    unionId = res.data.data.unionid;
                });
                await login
                    .unionIdLogin({
                        UnionId: unionId
                    })
                    .then(res => {
                        let url = document.cookie.split("url=")[1];
                        if (url.includes(";")) {
                            url = url.split(";")[0];
                        }
                        window.location.href = decodeURIComponent(url);
                    })
                    .catch(err => {
                        this.$message({
                            type: "info",
                            message: err + "请在公众号注册之后进行登录~"
                        });
                    });
            }
        }
    },
    watch: {
        $route: "loginWx"
    },
    mounted() {
        this.loginWx();
    }
};
</script>

<style>
.pc > .login-form {
    margin-top: 88px;
}

.pc .icon-wx {
    width: 24px;
    margin-left: 8px;
}

.pc .forget-the-password:hover,
.pc > .register > .register-button:hover {
    color: #0e59c7;
}

.pc > .register {
    text-align: center;
    margin-top: 4%;
    font-size: 14px;
    color: #a3b4cc;
}

.pc > .register > .register-button {
    text-decoration: none;
    color: #3581fb;
    margin-left: 8px;
}
</style>
